<template>
  <div class="room-content">
    <!-- <Navbar :appTitle="appTitle" rtitle="..." :actions='[{ text: checkedShow ? "取消报工" : "批量报工" }]'
      @clickAction='clickAction' /> -->
      <Navbar :appTitle="appTitle"
      @clickAction='clickAction' @ClickRight="$router.push('/application')"/>
    <Search ref="topSearch" class="search topSearch-pading-top" placeholder="工单编号|物品名称" :isAdd="false"
      :isScreen="true" :isType="true" @onSearch="onSearch" @onScreen="onScreen">
      <div v-if="currentEnvironment == 'dingding'" @click="clickAction('批量报工')" slot='rightText' style="margin-left:0.1rem">
        批量报工</div>
    </Search>

    <div style="display: flex;">
      <van-dropdown-menu active-color="#1989fa" class="dropdown-menu1">

        <van-dropdown-checkbox title="工序" :key='selecKey' :selectValue='selectValue'
          :columns="messSingleProcessTaskStaticsDtoList" @comfirm="taskProcessChange">
        </van-dropdown-checkbox>
      </van-dropdown-menu>

      <van-dropdown-menu active-color="#1989fa" class="dropdown-menu2">
        <van-dropdown-item title="任务开始时间" @open="createdTimeBeginVisible = true" />
      </van-dropdown-menu>

      <van-dropdown-menu active-color="#1989fa" class="dropdown-menu2">
        <van-dropdown-item title="任务结束时间" @open="createdTimeBeginVisible2 = true" />
      </van-dropdown-menu>
    </div>
    <search-tag ref="SearchTag" @getCategory="getCategory">
    </search-tag>
    <!--分页列表 -->
    <div class="listBox" :class="{ 'currentEnvironmentTrue': GLOBAL.currentEnvironment, 'currentEnvironmentFalse': !GLOBAL.currentEnvironment }">
      <pageList ref="pageList" :checkedShow="checkedShow" :operationTxt="operationTxt" :columns="columns"
        :listUrl="listUrl" @getCheckedValue="getCheckedValue" @handleList="handleList" @operationItem='operationItem'
        :minLen="3" :usedGetMethods="false">
        <div class="rt-column" slot="body" slot-scope="{ item }">

          <div class="rt-row">
            <div class="column">
              <span class="column-t">生产物品：</span>
              <span class="column-c">{{ item.serialName || '-' }}</span>
            </div>
          </div>

          <div class="rt-row">
            <div class="column">
              <span class="column-t">任务时间：</span>
              <span class="column-c">{{ item.planStartTime || '-' }} ~ {{ item.planEndTime || '-' }}</span>
            </div>
          </div>

          <div class="rt-row">
            <div class="column">
              <span class="column-t">计划数：</span>
              <span class="column-c">{{ item.planNum || '-' }}</span>
            </div>
          </div>
        </div>
        <div slot="label" slot-scope="{item}" class="labelBox" style="background-color: ;">
          <div class="labelLeft" :style="{ color:orderStatusFn(item.orderStatus).color,backgroundColor:orderStatusFn(item.orderStatus).bcColor }">{{ orderStatusFn(item.orderStatus).text }}</div>
        </div>
      </pageList>
    </div>
    <!-- dialog弹框 -->
    <van-dialog v-model="showDialog" show-cancel-button confirm-button-color="#1890FF" :showCancelButton='false'
      confirmButtonText='我知道了'>
      <div slot="title" class="dialogContentBox">
        <van-icon name="warning-o" size="16" color="#FF943E" /><span style="margin-left: 0.07rem">无法批量报工</span>
      </div>
      <div style="margin: 0.1rem 0.46rem 0.3rem 0.46rem; color: #888888">
        {{ dialogMessage }}
      </div>
      <div style="background: #f0f0f0; width: 100%; height: 0.01rem"></div>
    </van-dialog>

    <!--任务开始 => 开始时间 -->
    <van-popup v-model="createdTimeBeginVisible" position="bottom">
      <van-datetime-picker @confirm="confirmCreatedStartTime" @cancel="cancelCreatedStartTime" type="date" title="开始时间"
        v-model="minDate" />
    </van-popup>

    <!--任务开始 => 结束时间 -->
    <van-popup v-model="createdTimeEndVisible" position="bottom">
      <van-datetime-picker @confirm="confirmCreatedEndTime" @cancel="cancelCreatedEndTime" type="date" title="结束时间"
        :min-date="createEndMinDate" />
    </van-popup>

    <!--任务结束 => 开始时间 -->
    <van-popup v-model="createdTimeBeginVisible2" position="bottom">
      <van-datetime-picker @confirm="confirmCreatedStartTime2" @cancel="cancelCreatedStartTime2" type="date" title="开始时间"
        v-model="minDate2" />
    </van-popup>

    <!--任务结束 => 结束时间 -->
    <van-popup v-model="createdTimeEndVisible2" position="bottom">
      <van-datetime-picker @confirm="confirmCreatedEndTime2" @cancel="cancelCreatedEndTime2" type="date" title="结束时间"
        :min-date="createEndMinDate2" />
    </van-popup>

  </div>
</template>
<script>
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import { processTaskCompletionStatics, deleteTaskApi, basicProductionProcessesList } from "@/api/mobile";
import moment from "moment";
export default {
  name: "carRoomList",
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
    VanDropdownCheckbox,
  },
  data() {
    return {
      // 1
      minDate: new Date(),
      createEndMinDate: new Date(),
      createdTimeBeginVisible: false,
      createdTimeEndVisible: false,
      // 2
      minDate2: new Date(),
      createEndMinDate2: new Date(),
      createdTimeBeginVisible2: false,
      createdTimeEndVisible2: false,

      showDialog: false,
      dialogMessage: "",
      checkedShow: false, //列表是否支持选择
      operationTxt: "批量报工", //选择按钮名称
      listUrl: "/produce/produceOrderTask/list", //列表接口
      columns: {
        titleKey: "orderCode", //标题
        subtitleKey:'processesName',
        // content: [
        //   //内容
        //   {
        //     name: "生产物品",
        //     key: ["orderCode"],
        //   },
        //   {
        //     name: "任务时间",
        //     key: ["processName"],
        //   },
        //   {
        //     name: "计划数",
        //     key: ["planProductionNum", "reportWorkUnitText"],
        //   },
        // ],
        // labelKey: ["orderStatusName", "reportStatusName"], //标签
        // operation: [
        //   //操作
        //   {
        //     name: "报工",
        //     icon: require("../../../assets/actionIcon/report.png"),
        //   },
        //   {
        //     name: "申请领料",
        //     icon: require("../../../assets/actionIcon/apply.png"),
        //   },
        //   {
        //     name: "申请补料",
        //     icon: require("../../../assets/actionIcon/apply.png"),
        //   },
        //   {
        //     name: "申请退料",
        //     icon: require("../../../assets/actionIcon/apply.png"),
        //   },
        //   {
        //     name: "删除",
        //     icon: require("../../../assets/actionIcon/delete.png"),
        //     color: "#FF4D4F",
        //   },
        // ],
      },
      keyword: "",
      dropdownObj: {
        // processesIds: "",
        // reportStatus: "yes",
        // orderStatus: "",
      },
      messSingleProcessTaskStaticsDtoList: [],
      reportSelectList: [
        {
          text: "报工状态",
          value: "",
        },
        {
          text: "可报工",
          value: "yes",
        },
        {
          text: "不可报工",
          value: "no",
        },
      ],
      statusList: [
        {
          text: "生产状态",
          value: "",
        },
        {
          text: "未开始",
          value: "notStarted",
        },
        {
          text: "生产中",
          value: "inProduction",
        },
        {
          text: "已作废",
          value: "abolished",
        },
        {
          text: "已完成",
          value: "completed",
        },
      ],
      selectValue: [],
      selecKey: 1,
      appTitle: "",
      currentEnvironment: "",
    };
  },
  computed: {},
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = this.$route.query.navTitle;
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else if (this.checkedShow) {
      this.checkedShow = false
      next(false);
    } else {
      next();
    }
  },
  created() {
    this.currentEnvironment = localStorage.getItem("currentEnvironment");
    this.appTitle = this.$route.query.navTitle;
    this.getLeftData();
  },
  mounted() {
    let searchObj = {
      ...this.dropdownObj,
      keyword: this.keyword,
    };
    this.searchQuery(searchObj);
  },
  methods: {
    orderStatusFn(v){
      if(v == 0){
        return {
          text:'未开始',
          color:'#ff9900',
          bcColor:'#fff5e6'
        }
      }else if(v == 1){
        return {
          text:'生产中',
          color:'#2B85E4',
          bcColor:'#EAF3FC'
        }
      }else if(v == 2){
        return {
          text:'已完成',
          color:'#19BE6B',
          bcColor:'#E8F9F0'
        }
      }else if(v == 3){
        return {
          text:'已取消',
          color:'#ff9900',
          bcColor:'#fff5e6'
        }
      }else{
        return {
          text:'-',
          color:'#ff9900',
          bcColor:'#fff5e6'
        }
      }
    },
    // 选择任务开始 => 开始时间
    confirmCreatedStartTime(date) {
      this.createEndMinDate = date;
      this.dropdownObj.startPlanStartTime = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD");
      this.dropdownObj.endPlanStartTime = ""; // 切换开始时间后直接置空结束时间重新选择
      this.createdTimeBeginVisible = false;
      this.createdTimeEndVisible = true;
      this.createdTimeRead = moment(date).format("YYYY-MM-DD");
    },
    // 取消任务开始 => 开始时间
    cancelCreatedStartTime() {
      this.dropdownObj.startPlanStartTime = "";
      this.dropdownObj.endPlanStartTime = "";
      this.createdTimeRead = "";
      this.minDate = new Date();

      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
      this.createdTimeBeginVisible = false;
    },
    // 选择任务结束 => 开始时间
    confirmCreatedEndTime(date) {
      this.dropdownObj.endPlanStartTime = moment(date)
        .endOf("day")
        .format("YYYY-MM-DD");
      this.createdTimeEndVisible = false;
      this.createdTimeRead =
        this.createdTimeRead + "~" + moment(date).format("YYYY-MM-DD");
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 取消任务结束 => 结束时间
    cancelCreatedEndTime() {
      this.dropdownObj.startPlanStartTime = "";
      this.dropdownObj.endPlanStartTime = "";
      this.createdTimeRead = "";
      this.minDate = new Date();
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
      this.createdTimeEndVisible = false;
    },
    // ================================

    // 选择任务结束 => 开始时间
    confirmCreatedStartTime2(date) {
      this.createEndMinDate2 = date;
      this.dropdownObj.startPlanEndTime = moment(date)
        .startOf("day")
        .format("YYYY-MM-DD");
      this.dropdownObj.endPlanEndTime = ""; // 切换开始时间后直接置空结束时间重新选择
      this.createdTimeBeginVisible2 = false;
      this.createdTimeEndVisible2 = true;
      this.createdTimeRead2 = moment(date).format("YYYY-MM-DD");
    },
    // 取消任务结束 => 开始时间
    cancelCreatedStartTime2() {
      this.dropdownObj.startPlanEndTime = "";
      this.dropdownObj.endPlanEndTime = "";
      this.createdTimeRead2 = "";
      this.minDate2 = new Date();

      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
      this.createdTimeBeginVisible2 = false;
    },
    // 选择任务结束 => 开始时间
    confirmCreatedEndTime2(date) {
      this.dropdownObj.endPlanEndTime = moment(date)
        .endOf("day")
        .format("YYYY-MM-DD");
      this.createdTimeEndVisible2 = false;
      this.createdTimeRead2 =
        this.createdTimeRead2 + "~" + moment(date).format("YYYY-MM-DD");
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 取消任务结束 => 结束时间
    cancelCreatedEndTime2() {
      this.dropdownObj.startPlanEndTime = "";
      this.dropdownObj.endPlanEndTime = "";
      this.createdTimeRead2 = "";
      this.minDate2 = new Date();
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
      this.createdTimeEndVisible2 = false;
    },
    // ================================
    checkColor(orderStatus) {
      let colorStr = "";
      switch (orderStatus) {
        case "notStarted":
          colorStr = "#ff943e";
          break;
        case "inProduction":
          colorStr = "#1890ff";
          break;
        case "completed":
          colorStr = "#00b042";
          break;
        case "abolished":
          colorStr = "#888888";
          break;
      }
      return colorStr;
    },
    getLeftData() {
      let params = {
        // type: "production",
        pageNo: 1,
        pageSize: 1000,
      };
      basicProductionProcessesList(params).then((res) => {
        if (res.success) {
          let resultList = res.result.records;
          this.messSingleProcessTaskStaticsDtoList = [];
          resultList = resultList.filter((item) => {
            return item.processesName && item.processesName != "全部";
          });

          if (resultList.length > 0) {
            for (let item of resultList) {
              let resultObj = {
                text: item.processesName,
                value: item.id,
              };
              this.messSingleProcessTaskStaticsDtoList.push(resultObj);
            }
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    clickAction(text) {
      if (text == "批量报工") {
        this.checkedShow = true;
      } else {
        this.checkedShow = false;
      }
    },
    taskProcessChange(v) {
      this.selectValue = v.split(",");
      this.selectValue = this.selectValue.filter((item) => item);
      this.dropdownObj.processesIds = v;
      this.dropDownChang();
      this.selecKey += 1;
    },
    dropDownChang() {
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    onScreen() {
      this.appTitle = "更多筛选";
      this.keyword = this.$refs.topSearch.value;
      let pramsObj = JSON.parse(JSON.stringify(this.dropdownObj));
      pramsObj.keyword = this.keyword;
      this.$refs.SearchTag.showModal(this.keyword, pramsObj);
    },
    getCategory(sureObj) {
      this.appTitle = this.$route.query.navTitle;
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.selectValue = sureObj.processesIds.split(",");
      console.log("看看这个人：", this.selectValue);
      this.dropdownObj = JSON.parse(JSON.stringify(sureObj));
      delete this.dropdownObj.keyword;
      this.searchQuery(sureObj);
    },
    // 获取选择的列表数据
    getCheckedValue(ids, selectArr) {
      if (selectArr.length > 0) {
        this.dialogMessage = "";
        let strArr = [];
        for (let item of selectArr) {
          if (item.reportStatus == "no") {
            let str = item.orderCode + "-" + item.processName;
            strArr.push(str);
          }
        }
        if (strArr.length > 0) {
          this.dialogMessage =
            "任务：" + strArr.join("、") + "，状态不对无法报工";
          this.showDialog = true;
        } else {
          this.checkedShow = false
          this.$router.push({
            name: "productBatchReport",
            params: {
              selectArr: JSON.stringify(selectArr),
            },
          });
        }
      } else {
        this.$toast("请先选择数据");
      }
    },

    //列表点击更多按钮事件
    handleList(id, item, type) {
      // if (type == "更多操作") {
      //   this.columns.operation = [];
      //   if (item.reportStatus == "yes") {
      //     this.columns.operation.push({
      //       name: "报工",
      //       icon: require("../../../assets/actionIcon/report.png"),
      //     });
      //   }
      //   if (
      //     item.orderStatus == "notStarted" ||
      //     item.orderStatus == "inProduction"
      //   ) {
      //     let addArr = [
      //       {
      //         name: "申请领料",
      //         icon: require("../../../assets/actionIcon/apply.png"),
      //       },
      //       {
      //         name: "申请补料",
      //         icon: require("../../../assets/actionIcon/apply.png"),
      //       },
      //       {
      //         name: "申请退料",
      //         icon: require("../../../assets/actionIcon/apply.png"),
      //       },
      //     ];
      //     this.columns.operation.push(...addArr);
      //   }
      //   if (item.orderStatus == "abolished") {
      //     this.columns.operation.push({
      //       name: "删除",
      //       icon: require("../../../assets/actionIcon/delete.png"),
      //       color: "#FF4D4F",
      //     });
      //   }
      // }
      if (type == "列表") {
        this.$router.push({
          path: "/productTask/taskDetail",
          query: {
            taskId: id,
            item
          },
        });
      }
    },
    operationItem(item, type) {
      if (type == "报工") {
        this.$router.push({
          path: "/productTask/report",
          query: {
            taskId: item.id,
            orderId: item.orderId,
          },
        });
      }
      if (type == "删除") {
        this.confirmDelete(item);
      }
      if (type != "报工" && type != "删除") {
        this.applyAction(item, type);
      }
    },
    // 操作——删除
    confirmDelete(row) {
      let obj = {
        id: row.id,
      };
      deleteTaskApi(obj).then((res) => {
        if (res.success) {
          let searchObj = {
            ...this.dropdownObj,
            keywords: this.keywords,
          };
          this.searchQuery(searchObj);
          this.getLeftData();
          this.$toast("删除成功！");
        } else {
          this.$toast(res.message);
        }
      });
    },
    //操作——各种申请
    applyAction(row, type) {
      let str = "";
      if (type == "申请领料") {
        str = "/workManagement/materialRequisitionForm";
      } else if (type == "申请补料") {
        str = "/workManagement/addMaterialRequisitionForm";
      } else {
        str = "/workManagement/returnMaterial/returnMaterialForm";
      }
      if (str) {
        this.$router.push({
          path: str,
          query: {
            goodsBasicUnitText: row.goodsBasicUnitText,
            goodsName: row.goodsName,
            orderId: row.orderId,
          },
        });
      }
    },
    // 加载列表
    getList() {
      // 传1代表从第一页数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      // console.log("这里有啥：", params);
      this.$refs.pageList.searchQuery(params);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>



.topSearch-pading-top{
  padding-top: 20px;
}
.dropdown-menu1{
  width: 20%;
}
.dropdown-menu2{
  width: 40%;
}
.currentEnvironmentTrue{
  height: calc(100vh - 200px);
}
.currentEnvironmentFalse{
  height: calc(100vh - 300px);
}

.rt-column {
  padding: 20px 0 0 20px;
  //  border: 1px solid red;
}

.rt-row {
  margin-bottom: 20px;

  .column {
    width: 100%;
    display: flex;

    .column-t {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      // margin-bottom: 0.03rem;
    }

    .column-c {
      flex: 1;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      /* （超出限定的宽度就隐藏内容) */
      overflow: hidden;
      /* （设置文字在一行显示不能换行） */
      white-space: nowrap;
      /* （规定当文本溢出时显示省略符） */
      text-overflow: ellipsis;
    }
  }
}

.room-content {
  height: 100vh;
  overflow-y: scroll;

  .serach {
    height: 66px;
    background: #f2f2f6;
    border-radius: 0;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 66px;
    padding: 20px 24px;

    // border: 1px solid red;
    .placeh {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 46px;
    }

    .icon {
      width: 30px;
      height: 32px;
    }
  }

  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 32px 32px 32px;

    .content {
      display: flex;

      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 4px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 46px;
        margin-right: 24px;
        text-align: center;
        padding: 8px 56px;
        cursor: pointer;
      }

      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}

.labelBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;

  .labelLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 6px 20px;
    margin-right: 10px;
    font-size: 22px;
  }

  .labelRight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 6px 14px;
    font-size: 22px;
  }
}

.listBox {
  height: calc(100vh - 300px);
  overflow-y: auto;
}

.dialogContentBox {
  text-align: left;
  margin: 20px 38px;
  color: #191f25;
  font-size: 32px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}</style>